<template>
  <div class="adminSet">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-row>
        <h2>落地页配置</h2>
        <el-button @click="goback()" size="mini" type="primary" style="margin-left: 1000px">返回</el-button>
      </el-row>
      <div>
        <div v-for="(itemPageData, pageDataindex) in pageData" :key="itemPageData.key">
          <el-form-item class="wheelList" :label="itemPageData.labelName" v-if="'pictureList' == itemPageData.type"
            :porp="itemPageData.type">
            <div class="list">
              <div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'pictureList',
                                }" :key="item.key">
                <img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
                <div>
                  <el-upload :disabled="falg" class="avatar-uploader" :action="action" :headers="headers"
                    :show-file-list="false" :on-success="
                                            (res, file, fileList) => {
                                                return uploadShareList(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index,
                                                    item
                                                );
                                            }
                                        " :before-upload="beforeAvatarUpload">
                    <img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <p class="tips">*上传图片大小不能超过20M</p>
                </div>

                <div class="content"></div>

                <div v-show="!falg" class="upDownWrapper">
                  <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                            upClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="index !== 0" circle></el-button>
                  <el-button icon="el-icon-arrow-down" @click="
                                            downClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="
                                            index !==
                                            itemPageData.data.length - 1
                                        " circle></el-button>
                </div>
              </div>

              <div v-show="!falg" class="upDownWrapper">
                <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="upClick(pageDataindex)"
                  v-if="pageDataindex !== 0" circle></el-button>
                <el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
                  v-if="pageDataindex !== pageData.length - 1" circle></el-button>
              </div>

              <div v-show="!falg" @click="
                                    addNewShareList(pageData, pageDataindex)
                                " class="add-item">
                <img src="../../assets/img/foodsMan/add.png" alt />
              </div>
            </div>
          </el-form-item>
          <!-- -->

          <el-form-item class="wheelList" :label="itemPageData.labelName" v-if="'goodsMuduleList' == itemPageData.type"
            :porp="itemPageData.type">
            <div class="list">
              <div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'goodsMuduleList',
                                }" :key="item.key">
                <span class="span">选择商品排列样式</span>
                <div v-for="(
                                        goodsStyleItem, indexs
                                    ) in goodsStyleList" v-dragging="{
                                        item: goodsStyleItem,
                                        list: goodsStyleList,
                                        group: 'goodsStyleList',
                                    }" :key="goodsStyleItem.key">
                  <p v-if="goodsStyleItem.picUrl" class="title">
                    {{ goodsStyleItem.title }}
                  </p>
                  <div class="avatar-uploader">
                    <img v-if="goodsStyleItem.picUrl" :src="goodsStyleItem.picUrl" class="avatar" />
                  </div>
                  <p v-if="goodsStyleItem.picUrl" class="tips" style="width: 250px">
                    {{goodsStyleItem.advice+" "&nbsp;&nbsp;&nbsp;}}
                  </p>
                  <input v-model="item.urlType" class="title" type="radio" :id="goodsStyleItem.styleType"
                    :value="goodsStyleItem.styleType" v-bind:name="goodsStyleItem.title" v-on:click="
                                            check_question(
                                                goodsStyleItem.styleType,
                                                item.urlType,
                                                goodsStyleItem.title,
                                                index,
                                                item
                                            )
                                        " :disabled="falg" style="
                                            margin-top: 15px;
                                            margin-bottom: 15px;
                                        " />
                  <span v-show="
                                            goodsStyleItem.styleType ==
                                            item.urlType
                                        ">已选择</span>
                </div>

                <el-divider>
                  <i class>商品</i>
                </el-divider>
                <img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
                <div class="minitem" v-for="(minitem, indexsl) in item.goodsList" :key="minitem.key" v-dragging="{
                                        item: minitem,
                                        list: item.goodsList,
                                        group: 'item.goodsList' + index,
                                    }">
                  <!-- <img
                                v-show="!falg"
                                @click="deleteShareListItem(indexs,item.goodsList)"
                                class="close"
                                src="../../assets/img/foodsMan/cancel.png"
                                alt
                                    />-->
                  <div>
                    <el-upload :disabled="falg" class="avatar-uploader" :action="action" :headers="headers"
                      :show-file-list="false" :on-success="
                                                (res, file, fileList) => {
                                                    return uploadGoodsMuduleList(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        indexsl,
                                                        minitem
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload">
                      <img v-if="minitem.picUrl" :src="minitem.picUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>

                  <div class="content">
                    <el-select v-model="minitem.skipType" size="mini" placeholder="请选择类型" :disabled="falg">
                      <el-option v-for="item in [
                                                    {
                                                        label: '商品直购',
                                                        value: '1',
                                                    },
                                                    {
                                                        label: '商品分类',
                                                        value: '2',
                                                    },
                                                    {
                                                        label: '积分兑换',
                                                        value: '3',
                                                    },
                                                ]" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select v-if="minitem.skipType == '1'" v-model="minitem.goodsId" size="mini" placeholder="请选择商品"
                      filterable clearable :disabled="falg">
                      <el-option v-for="item in chooseGoodsList" :key="item.goodsId" :label="
                                                    item.goodsName +
                                                    '(单位：' +
                                                    item.unitName +
                                                    ')'
                                                " :value="item.goodsId"></el-option>
                    </el-select>
                    <el-select v-if="minitem.skipType == '3'" v-model="minitem.goodsId" size="mini"
                      placeholder="请选择兑换赠品" filterable clearable :disabled="falg">
                      <el-option v-for="item in chooseGoodsList2" :key="item.giftId" :label="
                                                    item.activityName +
                                                    '(：' +
                                                    item.giftName +
                                                    ')'
                                                " :value="item.giftId"></el-option>
                    </el-select>

                    <el-select v-if="minitem.skipType == '2'" v-model="minitem.goodsTypeId" @change="
                                                changeType(
                                                    minitem,
                                                    minitem.goodsTypeId
                                                )
                                            " size="mini" placeholder="请选择商品分类" filterable clearable :disabled="falg">
                      <el-option v-for="(item, i) in typeData" :key="item.key" :label="item.goodsTypeName"
                        :value="item.goodsTypeId"></el-option>
                    </el-select>
                    <p class="tips">
                      *上传图片大小不能超过20M
                    </p>

                    <div v-show="!falg" class="upDownWrapper">
                      <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                    upClickItem(
                                                        indexsl,
                                                        item.goodsList
                                                    )
                                                " v-if="indexsl !== 0" circle></el-button>
                      <el-button icon="el-icon-arrow-down" @click="
                                                    downClickItem(
                                                        indexsl,
                                                        item.goodsList
                                                    )
                                                " v-if="
                                                    indexsl !==
                                                    item.goodsList.length - 1
                                                " circle></el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="!falg" class="upDownWrapper">
                <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="upClick(pageDataindex)"
                  v-if="pageDataindex !== 0" circle></el-button>
                <el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
                  v-if="pageDataindex !== pageData.length - 1" circle></el-button>
              </div>

              <div v-show="!falg" @click="
                                    addNewLunboItemD(pageData, pageDataindex)
                                " class="add-item">
                <img src="../../assets/img/foodsMan/add.png" alt />
              </div>
            </div>
          </el-form-item>

          <el-form-item class="wheelList" :label="itemPageData.labelName" v-if="'adList' == itemPageData.type"
            :porp="itemPageData.type">
            <div class="list">
              <div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'adList',
                                }" :key="item.key">
                <img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
                <div class="minitem" v-for="(minitem, indexs) in item.goodsList" v-dragging="{
                                        item: minitem,
                                        list: item.goodsList,
                                        group: 'minitem',
                                    }" :key="minitem.indexs">
                  <img v-show="!falg" @click="
                                            deleteShareListItem(
                                                indexs,
                                                item.goodsList
                                            )
                                        " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
                  <div>
                    <el-upload :disabled="falg" class="avatar-uploader" :action="action" :headers="headers"
                      :show-file-list="false" :on-success="
                                                (res, file, fileList) => {
                                                    return uploadShareList(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        minitem
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload">
                      <img v-if="minitem.picUrl" :src="minitem.picUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>

                  <div class="content">
                    <el-select v-model="minitem.skipType" size="mini" placeholder="请选择类型" :disabled="falg">
                      <el-option v-for="item in [
                                                    {
                                                        label: '商品直购',
                                                        value: '1',
                                                    },
                                                    {
                                                        label: '商品分类',
                                                        value: '2',
                                                    },
                                                    {
                                                        label: '积分兑换',
                                                        value: '3',
                                                    },
                                                ]" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select v-if="minitem.skipType == 1" v-model="minitem.goodsId" size="mini" placeholder="请选择商品"
                      filterable clearable :disabled="falg">
                      <el-option v-for="item in chooseGoodsList" :key="item.goodsId" :label="
                                                    item.goodsName +
                                                    '(单位：' +
                                                    item.unitName +
                                                    ')'
                                                " :value="item.goodsId"></el-option>
                    </el-select>
                    <el-select v-if="minitem.skipType == '3'" v-model="minitem.goodsId" size="mini"
                      placeholder="请选择兑换赠品" filterable clearable :disabled="falg">
                      <el-option v-for="item in chooseGoodsList2" :key="item.giftId" :label="
                                                    item.activityName +
                                                    '(：' +
                                                    item.giftName +
                                                    ')'
                                                " :value="item.giftId"></el-option>
                    </el-select>
                    <el-select v-if="minitem.skipType == 2" v-model="minitem.goodsTypeId" @change="
                                                changeType(
                                                    minitem,
                                                    minitem.goodsTypeId
                                                )
                                            " size="mini" placeholder="请选择商品分类" filterable clearable :disabled="falg">
                      <el-option v-for="(item, i) in typeData" :key="i" :label="item.goodsTypeName"
                        :value="item.goodsTypeId"></el-option>
                    </el-select>
                    <p class="tips">
                      *上传图片大小不能超过20M
                    </p>

                    <div v-show="!falg" class="upDownWrapper">
                      <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                    upClickItem(
                                                        indexs,
                                                        item.goodsList
                                                    )
                                                " v-if="indexs !== 0" circle></el-button>
                      <el-button icon="el-icon-arrow-down" @click="
                                                    downClickItem(
                                                        indexs,
                                                        item.goodsList
                                                    )
                                                " v-if="
                                                    indexs !==
                                                    item.goodsList.length - 1
                                                " circle></el-button>
                    </div>
                  </div>
                </div>
                <el-button v-show="!falg" type="text" size="mini" @click="addAdList(index, item.goodsList)">添加
                </el-button>
              </div>

              <div v-show="!falg" class="upDownWrapper">
                <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="upClick(pageDataindex)"
                  v-if="pageDataindex !== 0" circle></el-button>
                <el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
                  v-if="pageDataindex !== pageData.length - 1" circle></el-button>
              </div>

              <div v-show="!falg" @click="
                                    addNewLunboItemD2(pageData, pageDataindex)
                                " class="add-item">
                <img src="../../assets/img/foodsMan/add.png" alt />
              </div>
            </div>
          </el-form-item>

          <el-form-item class="wheelList" :label="itemPageData.labelName" v-if="'videoList' == itemPageData.type"
            :porp="itemPageData.type">
            <div class="listVideo">
              <div class="itemVideo" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'videoList',
                                }" :key="item.key">
                <img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
                <div>
                  <el-upload :disabled="falg" class="avatar-uploader" :action="action" :headers="headers"
                    :show-file-list="false" :on-success="
                                            (res, file, fileList) => {
                                                return uploadvideoList(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index,
                                                    item
                                                );
                                            }
                                        " :before-upload="beforeAvatarUploadVideo">
                    <video controls v-if="item.picUrl" :src="item.picUrl" class="avatar" :style="styleObject" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <p class="tips">
                    *上传视频大小不能超过20M(格式4:3)
                  </p>
                </div>

                <div class="contentVideo">
                  <div class="flex-row" style="align-items: flex-end">
                    <el-upload class="avatar-uploader" :action="action" :headers="headers" :show-file-list="false"
                      :on-success="
                                                (res, file, fileList) => {
                                                    return uploadVideoListHaibao(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        item
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload">
                      <img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <p class="tips" style="margin-left: 10px">
                      注：请上传视频封面图(限20MB)
                    </p>
                  </div>

                  <div v-show="!falg" class="upDownWrapper">
                    <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                upClickItem(
                                                    index,
                                                    itemPageData.data
                                                )
                                            " v-if="index !== 0" circle></el-button>
                    <el-button icon="el-icon-arrow-down" @click="
                                                downClickItem(
                                                    index,
                                                    itemPageData.data
                                                )
                                            " v-if="
                                                index !==
                                                itemPageData.data.length - 1
                                            " circle></el-button>
                  </div>
                </div>
              </div>

              <div v-show="!falg" class="upDownWrapper">
                <el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="upClick(pageDataindex)"
                  v-if="pageDataindex !== 0" circle></el-button>
                <el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
                  v-if="pageDataindex !== pageData.length - 1" circle></el-button>
              </div>

              <div v-show="!falg" @click="
                                    addNewShareList2(pageData, pageDataindex)
                                " class="add-item">
                <img src="../../assets/img/foodsMan/add.png" alt />
              </div>
            </div>
          </el-form-item>
          <!--  -->
        </div>
      </div>
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 30px">
          <el-button type="info" @click="resetForm()" size="mini" v-show="!falg">取 消</el-button>
          <el-button type="primary" @click="saveForm()" size="mini" v-show="!falg">保 存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import {
    queryStockGoods,
    queryGoodsCategorys
  } from "@/api/compositegoods";
  import {
    getPromotionDeciduousIndexWindow,
    editPromotionDeciduousIndexWindow,
    qryBonuspointConverInfo
  } from "@/api/adSetting";
  import qs from "qs";
  let toChinese = function(val) {
    let chin_list = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']; //所有的数值对应的汉字
    let sn = parseInt(val) + 1; //这里由于我的后台是从0开始排序
    if (sn <= 10) {
      return chin_list[sn - 1];
    } else if (sn <= 100) {
      if (sn < 20)
        return '十' + chin_list[sn % 10 - 1];
      if (sn % 10 == 0)
        return chin_list[Math.floor(sn / 10) - 1] + '十';
      else
        return chin_list[Math.floor(sn / 10) - 1] + '十' + chin_list[sn % 10 - 1];
    } else {
      //可以支持更多
    }
  }
  export default {
    data() {
      return {
        action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
        styleObject: {
          width: '320px',
          'line-height': '180px',
          height: '180px'
        },
        headers: {},
        chooseGoodsList: [],
        chooseGoodsList2: [],
        typeData: [],
        pageData: [{
            'type': "pictureList",
            'data': [{
              urlType: 0,
              uri: "",
              showNo: 0,
              skipType: "",
              posterUrl: "",
              goodsId: "",
              goodsTypeId: "",
              isRelatedActivity: 1
            }],
            "labelName": "图片模块一"
          }, //图片模块
          {
            'type': "goodsMuduleList",
            'data': [{
              urlType: 0,
              uri: "",
              showNo: 0,
              skipType: "",
              posterUrl: "",
              goodsId: "",
              goodsTypeId: "",
              isRelatedActivity: 1,
              goodsList: []
            }],
            "labelName": "商品模块一"
          }, //商品模块
          {
            'type': "adList",
            'data': [{
              urlType: 0,
              uri: "",
              showNo: 0,
              skipType: "",
              posterUrl: "",
              goodsId: "",
              goodsTypeId: "",
              isRelatedActivity: 1,
              goodsList: []
            }],
            "labelName": "轮播模块一"
          }, //轮播模块
          {
            'type': "videoList",
            'data': [{
              urlType: 0,
              uri: "",
              showNo: 0,
              skipType: "",
              posterUrl: "",
              goodsId: "",
              goodsTypeId: "",
              isRelatedActivity: 1
            }],
            "labelName": "视频模块一"
          } //视频模块
        ],
        goodsMuduleList: [], //商品模块
        goodsStyleList: [{
            "title": "样式一",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2Fe1bbfd8c-e4fe-475c-bed5-8cdc41b4a7d2.png",
            "styleType": 1,
            "advice": "建议单张图片尺寸为100*200 "
          },
          {
            "title": "样式二",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F09d966c1-7d4d-4c62-8d6f-486d56cddefc.png",
            "styleType": 2,
            "advice": "建议单张图片尺寸为600*600 "
          },
          {
            "title": "样式三",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F7f76fa8a-09a3-41e2-b0ae-2703d136a628.png",
            "styleType": 3,
            "advice": "建议单张图片尺寸为400*400 "
          },
          {
            "title": "样式四",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F9fc90737-2a47-42dd-b001-29bc8fee35f8.png",
            "styleType": 4,
            "advice": "建议单张图片尺寸为300*300 "
          },
          {
            "title": "样式五",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F81eb8e1a-38ab-4b51-a862-d45ad7e1de19.png",
            "styleType": 5,
            "advice": "建议单张图片尺寸为200*200 "
          },
          {
            "title": "样式六",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2Ffc8b423d-b182-4b10-837c-b702dff0b6c8.png",
            "styleType": 6,
            "advice": "建议单张图片尺寸为200*200 "
          },
          {
            "title": "样式七",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2F41aa373f-cdc1-462f-a6c4-4ddf50524173.png",
            "styleType": 7,
            "advice": "建议单张图片尺寸为100*200 "
          },
          {
            "title": "样式八",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2F863ac859-da07-4203-bdec-8807199dc682.png",
            "styleType": 8,
            "advice": "建议单张图片尺寸为100*200"
          },
          {
            "title": "样式九",
            "picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F6ce6cc9b-4e03-4194-a8a5-b9b8f03439fc.png",
            "styleType": 9,
            "advice": "建议单张图片尺寸为100*200 "
          }
        ],
        //"../../assets/img/goodsStyle/goodsStyle1.png"
        adList: [], //轮播模块
        pictureList: [], //图片模块
        videoList: [], //视频模块
        lunboItem: {
          urlType: 1,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1
          // goodsList: []
        },
        falg: false,
        showNo: "",
        ruleForm: {
          uuid: "",
          type: "",
          data: []
        },
        rules: {}
      };
    },
    created() {
      this.headers = {
        token: (localStorage.token || '')
      };
      this.getProductType();
    },
    mounted() {
      this.falg = this.$route.params.flag;
      this.showNo = this.$route.params.index;
      this.getUserWhiteList(); //获取当前配置商品信息
      this.getUserWhiteList2(); //获取当前配置商品信息
      this.getPromotionDeciduousIndexWindow(); //获取当前配置信息
      this.$dragging.$on('dragged', ({
        value
      }) => {});
    },
    watch: {
      'adList': {
        handler(newName, oldName) {
          // ...
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      goback() {
        this.$router.go("-1");
      },
      //获取当前配置商品信息
      getUserWhiteList() {
        let data = {
          size: 99999,
          current: 1,
          condition: {
            isMinUnit: 1,
            status: 1,
            goodsStyle: 1
          },
          ascs: [],
          descs: []
        };
        queryStockGoods(data).then(res => {
          this.chooseGoodsList = res.records;
        });
      },
      //获取当前配置兑换商品信息
      getUserWhiteList2() {
        let data = {
          size: 99999,
          current: 1,
          condition: {},
          ascs: [],
          descs: []
        };
        qryBonuspointConverInfo(data).then(res => {
          this.chooseGoodsList2 = res.result;
        });
      },
      //获取商品分类列表
      getProductType(v) {
        let data = {};
        queryGoodsCategorys(data).then(res => {
          this.typeData = res.records;
        });
      },

      //取消
      resetForm() {
        this.getPromotionDeciduousIndexWindow();
        this.$router.push("adSetting");
      },
      //获取当前配置信息
      getPromotionDeciduousIndexWindow() {
        let data = this.showNo;
        getPromotionDeciduousIndexWindow(data).then(res => {
          let jsonstr = res.result.deciduousIndexWindow;
          // let result = qs.parse(jsonstr);
          let result = JSON.parse(jsonstr); // jsonstr是json字符串
          // result = eval('(' + jsonstr + ')'); // jsonstr是json字符串
          if (result != null) {
            this.uuid = res.result.uuid == null ? "" : res.result.uuid;
            this.pageData = result;
            // this.pictureList = result[0].data; // result.pictureList == undefined?[]:result.pictureList;
            // this.goodsMuduleList = result[1].data; // result.goodsMuduleList == undefined?[]:result.goodsMuduleList;
            // this.adList = result[2].data; // result.adList == undefined?[]:result.adList;
            // this.videoList = result[3].data; // result.videoList == undefined?[]:result.videoList;
          }
        });
      },
      //保存
      saveForm() {
        // let pictureList = {type: "pictureList",data: this.pictureList};
        // let videoList = {type: "videoList",data: this.videoList};
        // let adList = {type: "adList",data: this.adList};
        // let goodsMuduleList = {type: "goodsMuduleList",data: this.goodsMuduleList};
        // let shuzu =[pictureList,goodsMuduleList,adList,videoList];
        let array = JSON.stringify(this.pageData);
        let data = {
          uuid: this.uuid,
          // deciduousIndexWindow:qs.stringify(data1)
          deciduousIndexWindow: array,
          type: this.showNo
        };
        editPromotionDeciduousIndexWindow(data).then(res => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.message,
              type: "success"
            });
            // this.$router.push("adSetting");
            this.$router.go("-1");
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: "error"
            });
          }
          this.getPromotionDeciduousIndexWindow();
        });
      },
      //上传尺寸限制
      beforeAvatarUpload(file) {
        let flag = true;
        const filtType = file.type;
        const isLt20M = file.size / 1024 / 1024 / 10 < 3;
        if (filtType != "image/jpeg" && filtType != "image/png" && filtType != "image/jpg" && filtType != "image/gif") {
          this.$message.error("上传图片只能是 JPEG JPG、PNG GIF格式!");
          flag = false;
        }
        if (!isLt20M) {
          this.$message.error("上传图片大小不能超过 30MB!");
          flag = false;
        }
        return flag;
      },
      //上传视频大小限制
      beforeAvatarUploadVideo(file) {
        let flag = true;
        const filtType = file.type;
        const isLt20M = file.size / 1024 / 1024 < 100;
        if (filtType != "video/*" && filtType != "video/mp4") {
          this.$message.error("上传视频只能是 mp4 格式!");
          flag = false;
        }
        //   if (!isLt20M) {
        //     this.$message.error("上传视频大小不能超过 100MB!");
        //     flag = false;
        //   }
        return flag;
      },
      //新增分享配置
      addNewShareList(list, pageDataindex) {
        let index = 0;
        this.pageData.forEach((item, i) => {
          if (item.type == "pictureList") {
            index++
          }
        });
        let lunboItemD = {
          urlType: 0,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1
        };
        let module = {
          'type': "pictureList",
          'data': [lunboItemD],
          "labelName": "图片模块" + toChinese(index)
        };
        list.splice(pageDataindex + 1, 0, module);
      },
      addNewShareList2(list, pageDataindex) {
        let index = 0;
        this.pageData.forEach((item, i) => {
          if (item.type == "videoList") {
            index++
          }
        });
        let lunboItemD = {
          urlType: 0,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1
        };
        let module = {
          'type': "videoList",
          'data': [lunboItemD],
          "labelName": "视频模块" + toChinese(index)
        };
        list.splice(pageDataindex + 1, 0, module);
      },
      addNewLunboItemD(list, pageDataindex) {
        let index = 0;
        this.pageData.forEach((item, i) => {
          if (item.type == "goodsMuduleList") {
            index++
          }
        });
        let lunboItemD = {
          urlType: 0,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1,
          goodsList: []
        };
        let module = {
          'type': "goodsMuduleList",
          'data': [lunboItemD],
          "labelName": "商品模块" + toChinese(index)
        };
        list.splice(pageDataindex + 1, 0, module);
      },
      addNewLunboItemD2(list, pageDataindex) {
        let index = 0;
        this.pageData.forEach((item, i) => {
          if (item.type == "adList") {
            index++
          }
        });
        let lunboItemD = {
          urlType: 0,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1,
          goodsList: []
        };
        let module = {
          'type': "adList",
          'data': [lunboItemD],
          "labelName": "轮播模块" + toChinese(index)
        };
        list.splice(pageDataindex + 1, 0, module);
      },
      deleteShareListItem(index, list) {
        //删除分享配置;
        this.$confirm("此操作将永久删除该配置, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            list.splice(index, 1);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      uploadShareList(res, file, fileList, index, item) {
        // let array = JSON.parse(JSON.stringify(this.pictureList));
        // array[index].picUrl = res.result;
        // this.pictureList = JSON.parse(JSON.stringify(array));
        this.$set(item, "picUrl", res.result);
      },
      uploadvideoList(res, file, fileList, index, item) {
        // let array = JSON.parse(JSON.stringify(this.videoList));
        // array[index].picUrl = res.result;
        // this.videoList = JSON.parse(JSON.stringify(array));
        this.$set(item, "picUrl", res.result);
      },
      uploadVideoListHaibao(res, file, fileList, index, item) {
        // let array = JSON.parse(JSON.stringify(this.videoList));
        // array[index].posterUrl = res.result;
        // this.videoList = JSON.parse(JSON.stringify(array));
        this.$set(item, "posterUrl", res.result);

      },
      // uploadAdList(res, file, fileList, index,indexs) {
      //   this.$set(this.adList[index].goodsList[indexs],"picUrl",res.result);
      // },
      //添加商品区块
      addAdList(index, list) {
        let lunboItemD = {
          urlType: 1,
          uri: "",
          showNo: 0,
          skipType: "",
          posterUrl: "",
          goodsId: "",
          goodsTypeId: "",
          isRelatedActivity: 1,
          picUrl: ""
        };
        list.push(lunboItemD);
      },
      uploadGoodsMuduleList(res, file, fileList, index, indexs, minitem) {
        this.$set(minitem, "picUrl", res.result);
      },
      //添加商品区块
      // addGoodsMuduleList(index,list){
      //   let lunboItemD = {urlType: 1,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",picUrl: ""};
      //   this.goodsMuduleList[index].goodsList.push(lunboItemD);
      // },
      check_question(v, l, title, index, list) {
        this.$set(list, "uri", title);
        if (v != l) {
          list.goodsList = [];
        }
        for (let i = 0; i < v; i++) {
          if (v != l) {
            let lunboItemD = {
              urlType: 1,
              uri: "",
              showNo: 0,
              skipType: "",
              posterUrl: "",
              goodsId: "",
              goodsTypeId: "",
              isRelatedActivity: 1,
              picUrl: ""
            };
            list.goodsList.push(lunboItemD);
          } else {
            //
          }
          // arr.push(data[i])
        }
        // this.addGoodsMuduleList(index,list);
      },

      // 上移
      upClick(index) {
        let newArr = this.swapItems(this.pageData, index, index - 1)
        this.pageData = newArr
      },
      // 下移
      downClick(index) {
        let newArr = this.swapItems(this.pageData, index, index + 1)
        this.pageData = newArr
      },
      // 上下移动的核心。
      swapItems(pageData, index1, index2) {
        pageData[index1] = pageData.splice(index2, 1, pageData[index1])[0];
        return pageData;
      },
      changeType(it, val) {
        this.typeData.find((item) => {
          if (item.goodsTypeId === val) { //筛选出匹配数据
            it.isRelatedActivity = item.isRelatedActivity;
          }
        })
      },
      // 上移
      upClickItem(index, list) {
        let newArr = this.swaps(list, index, index - 1)
        list = newArr
      },
      // 下移
      downClickItem(index, list) {
        let newArr = this.swaps(list, index, index + 1)
        list = newArr
      },
      // 上下移动的核心。
      swaps(pageData, index1, index2) {
        pageData[index1] = pageData.splice(index2, 1, pageData[index1])[0];
        return pageData;
      },

    },
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      to.meta.keepAlive = true; // C 跳转到 A 时让 A 不缓存，即刷新
      next();
    },
  };
</script>>

<style lang="less" scoped>
  .wheelList .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .wheelList .item {
    width: 840px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
    margin: 10px;
  }

  .wheelList .item .avatar-uploader {
    width: 120px;
    height: 120px;
  }

  .wheelList .item .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
  }

  /deep/ .wheelList .item .el-upload {
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  .wheelList .item .content {
    margin-left: 20px;
  }

  .wheelList .item .content .avatar-uploader {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }

  .wheelList .item .content .avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
  }

  /deep/ .wheelList .item .content .el-upload {
    width: 80px;
    height: 80px;
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  /deep/ .wheelList .item .content .el-input--mini .el-input__inner {
    margin-bottom: 10px !important;
  }

  /deep/ .wheelList .item .content .el-switch {
    margin-bottom: 10px !important;
  }

  .wheelList .listVideo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .wheelList .itemVideo {
    width: 840px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
    margin: 10px;
  }

  .wheelList .itemVideo .avatar-uploader {
    width: 320px;
    height: 180px;
  }

  .wheelList .itemVideo .avatar-uploader .avatar {
    width: 320px;
    height: 180px;
  }

  /deep/ .wheelList .itemVideo .el-upload {
    width: 320px;
    height: 180px;
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  /deep/ .wheelList .itemVideo .contentVideo .el-input--mini .el-input__inner {
    margin-bottom: 10px !important;
  }

  /deep/ .wheelList .itemVideo .contentVideo .el-switch {
    margin-bottom: 10px !important;
  }

  .wheelList .itemVideo .contentVideo {
    margin-left: 20px;
  }

  .wheelList .itemVideo .contentVideo .avatar-uploader {
    width: 80px;
    height: 80px;
  }

  .wheelList .itemVideo .contentVideo .avatar-uploader .avatar {
    width: 80px;
    height: 80px;
  }

  /deep/ .wheelList .itemVideo .contentVideo .el-upload {
    width: 80px;
    height: 80px;
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  .add-item {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    position: relative;
    background: #ffffff;
    margin-left: 20px;
  }

  .add-item img {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
  }

  .upDownWrapper {
    width: 100px;
    height: 20px;
    border-radius: 5px;
    // border: 1px solid #f2f2f2;
    position: relative;
    // background: #ffffff;
    margin-left: 20px;
  }

  .upDownWrapper .up {
    // class: el-icon-top;
  }

  .upDownWrapper .down {
    // class: el-icon-bottom;
  }

  .wheelList .item .upDownWrapper {
    float: right;
    width: 100px;
    height: 20px;
    border-radius: 5px;
    // border: 1px solid #f2f2f2;
    position: relative;
    // background: #ffffff;
    margin-left: 20px;
  }

  .wheelList .item .upDownWrapper .up {
    class: el-icon-top;
  }

  .wheelList .item .upDownWrapper .down {
    class: el-icon-bottom;
  }

  .wheelList .item .upDownWrapper .el-button+.el-button {
    margin-left: 0px;
    margin-right: 10px;
  }

  .tips {
    width: max-content;
    font-size: 12px;
    line-height: normal;
    color: red;
    margin-top: 5px;
  }

  .title {
    margin-left: 40px;
  }

  .close {
    width: 30px;
    height: 30px;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 11;
  }

  .wheelList .list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .wheelList .item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .wheelList .item .minitem {
    width: 350px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
    margin: 10px;
  }

  .wheelList .item .minitem .avatar-uploader {
    width: 120px;
    height: 120px;
  }

  .wheelList .item .minitem .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
  }

  /deep/ .wheelList .item .minitem .el-upload {
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
  }

  .wheelList .item .minitem .content {
    margin-left: 0px;
  }

  .wheelList .item .span {
    width: 840px;
    margin-bottom: 20px;
    background-color: "";
    display: -moz-inline-box;
    display: inline-block;
  }
</style>
